<template>
  <div style="display: flex;flex-direction: column;height: calc(100% - 80px)">
    <dv-border-box-2 :color="['#025d6d']" style="flex: 1;">
      <div style="margin-top: 10px;margin-left: 5px;margin-right: 5px;">
        <el-input placeholder="请输入企业关键字" v-model="keyword"/>
        <el-table :data="tables"
          style="width: 100%;height: 100%;margin:0 auto;margin-bottom: 10px;"
          @row-click="openDetails" :header-row-style="{ fontSize: '17px', color: 'white' }"
          :row-style="{ fontSize: '15px', color: 'white' }" border>
          <el-table-column prop="compName" label="企业名称" align="center" width="280">
          </el-table-column>
          <el-table-column prop="month1" label="生产工艺确认是否符合属地安全环保要求" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="1" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>
          <el-table-column prop="month2" label="生产类型与厂房使用性质是否匹配" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="2" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>
          <el-table-column prop="month3" label="是否完成立项备案" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="3" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>

          <el-table-column prop="month3" label="环评是否签约及实施" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="4" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>

          <el-table-column prop="month3" label="安全三同时是否签约及实施" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="5" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>

          <el-table-column prop="month3" label="所有手续完结" align="center">
            <template slot-scope="scope">
              <CompStageMark :state="scope.row.stage" :current="6" :isNg="scope.row.isNg" />
            </template>
          </el-table-column>

          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>

        </el-table>

      </div>
    </dv-border-box-2>

    <div style="display: flex;margin-left: 10px;margin-top: 10px;align-items: center;">

    </div>
    <div style="display: flex;margin-left: 10px;margin-top: 10px;align-items: center;">
      <div style="color: white;margin-right: 10px;width: 150px;">否决项目状态色块</div>
      <div class="tip_rect" style="background-color: #ff0000;"></div>
      <div style="color: white;margin-right: 10px;width: 150px;">进行中项目状态色块</div>
      <div class="tip_rect" style="background-color: #b2540e;"></div>
      <div class="tip_rect" style="background-color: #0070c0;"></div>
      <div class="tip_rect" style="background-color: #f4aa72;"></div>
      <div class="tip_rect" style="background-color: #ffff00;"></div>
      <div class="tip_rect" style="background-color: #00b0f0;"></div>
      <div class="tip_rect" style="background-color: #00b050;"></div>
    </div>

  </div>
</template>
<script>
// import Charts from '@jiaminghi/charts';
// import { tableData } from './data';
import CompStageMark from '@/components/CompStageMark';
import { queryCompLifeList } from '@/service/compLife';
export default {
  components: { CompStageMark },
  data() {
    return {
      loading: true,
      value: '1',
      tableData: [],

      option1: {},
      keyword:''
    };
  },
  computed: {
    tables() {
      const search = this.keyword;
      console.log(search);
      if (search) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    loadCharts() {},
    openDetails(row, index) {
      console.log('row', row);
      this.$router.push({
        name: 'newCompStage',
        params: {
          compName: row.compName,
          lifeType: 'configCompLifeDecoration',
        },
      });
    },
    async loadTables() {
      const res = await queryCompLifeList({
        lifeType: 'configCompLifeDecoration',
      });
      if (res.dataList[0]) {
        this.tableData = res.dataList;
      }
    },
  },

  mounted() {
    const vm = this;
    this.loadTables();
  },
};
</script>
<style scoped>
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}

::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table th.el-table__cell {
  background-color: transparent !important;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

::v-deep .el-table thead.is-group th.el-table__cell {
  background-color: transparent !important;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

::v-deep .el-table .el-table__cell {
  padding: 0px 0px;
}

::v-deep .el-table .cell {
  padding: 0;
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}

/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}

.tip_rect {
  height: 30px;
  width: 100px;
  margin-right: 10px;
}


::v-deep .el-input .el-input__inner {
  background-color: transparent;
  color: white;
}

</style>